<template>
  <div class="app-container">
    <el-table
      ref="tableRef"
      :data="tableData"
      highlight-current-row
      max-height="600"
      v-loading="loading"
      v-horizontal-scroll="'auto'"
      style="width: 100%;margin-top: 10px;">
      <el-table-column
        property="registrationNumber"
        label="登记号"
        align="center"
      />
      <el-table-column
        property="name"
        label="名称"
        align="center"
      />
      <el-table-column
        property="acquisitionMethod"
        label="取得方式"
        align="center"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_obtain_method" :value="scope.row.acquisitionMethod"/>
        </template>
      </el-table-column>
      <el-table-column
        property="rightHolder"
        label="著作权人"
        align="center"
      />
      <el-table-column
        property="transferorUnit"
        label="转让前单位"
        align="center"
        min-width="100"
      />
      <el-table-column
        property="transferorDate"
        label="转让日期"
        align="center"
      />
      <el-table-column
        property="applicationDate"
        label="申请日期"
        align="center"
      />
      <el-table-column
        property="status"
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_copyright_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column
        property="authorizationDate"
        label="下证日期"
        align="center"
      />
      <el-table-column
        property="series"
        label="所属系列"
        align="center"
      />
      <el-table-column
        property="correspondingDevice"
        label="对应设备"
        align="center"
      />
      <el-table-column
        property="highNewUsage"
        label="高新使用情况"
        align="center"
        min-width="120"
      />
      <el-table-column
        property="remark"
        label="备注"
        align="center"
      />
      <el-table-column
        property="createBy"
        label="创建人"
        align="center"
        width="100"
      />
      <el-table-column
        property="createTime"
        label="创建时间"
        align="center"
        width="160"
        sortable
      />
    </el-table>

    <el-card style="margin: 10px 0;" v-if="$auth.hasPermi('res:copyright:edit')">
      <el-select v-model="uploadFileType" placeholder="请选择附件类型"
                 default-first-option filterable style="display: inline-block">
        <el-option v-for="item in fileTypeList" :key="item.value" :label="item.label"
                   :value="item.value"/>
      </el-select>
      <el-upload
        class="upload-demo"
        accept=".pdf"
        :action="env + '/crm/product/uploadImage'"
        :file-list="fileList"
        :multiple="false"
        :show-file-list="false"
        :on-success="uploadSuccess"
        style="display: inline-block;margin-left: 10px"
      >
        <el-button size="small" type="primary">上传附件</el-button>
      </el-upload>
    </el-card>

    <el-card v-if="files.length">
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="file_list">
            <div v-for="i in files" :key="i.id" class=" item" @click="handleChange(i)">
              <el-tooltip effect="dark" :content="`${i.type}_${i.filename}`" placement="top">
                <div class="text">
                  {{ i.type }}_{{ i.filename }}
                </div>
              </el-tooltip>
              <div style="padding: 0 4px;" v-if="$auth.hasPermi('res:copyright:edit')">
                <el-link type="primary" icon="el-icon-edit" :underline="false" style="margin-right: 6px"
                         @click="openDialog(i)"></el-link>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="handleDelete(i)"
                >
                  <el-link slot="reference" type="danger" icon="el-icon-delete" :underline="false"></el-link>
                </el-popconfirm>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <iframe id="myIframe" :src="pdfUrl" height="800px" width="100%"></iframe>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog
      :title="'修改'"
      :visible.sync="dialogVisible"
      width="700px"
      :close-on-click-modal="false"
      :fullscreen="device === 'mobile'"
    >
      <el-form :model="form" ref="formRef" label-width="100px" class="demo-form"
               :label-position="device === 'mobile' ? 'top' : 'right'">
        <el-form-item label="附件类型" prop="remark">
          <el-select v-model="form.type" placeholder="请选择附件类型"
                     default-first-option filterable style="display: inline-block">
            <el-option v-for="item in fileTypeList" :key="item.value" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="附件名称" prop="remark">
          <el-input v-model="form.filename" readonly></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getDataListApi} from "@/api/saas/research/property/copyright";
import {
  getDataListApi as getFileListApi,
  addDataApi,
  deleteDataApi,
  updateDataApi
} from "@/api/saas/research/property/copyright/detail";
import {mapGetters} from 'vuex'

export default {
  name: "CopyrightDetail",
  dicts: ['sys_patent_type', 'sys_obtain_method', 'sys_copyright_status'],
  data() {
    return {
      pdfjs: '/pdfjs/web/viewer.html',
      pdfUrl: "", // pdf地址
      env: process.env.VUE_APP_STATIC_API || "",
      fileList: [],
      tableData: [], // 表格数据
      loading: false, // 加载动画
      queryParams: {
        id: null
      }, // 查询参数
      // 选中上传文件的类型
      uploadFileType: '说明书',
      // 上传文件的类型
      fileTypeList: [
        {
          value: '说明书',
          label: '说明书'
        },
        {
          value: '源代码',
          label: '源代码'
        },
        {
          value: '补正通知书',
          label: '补正通知书'
        },
        {
          value: '转让通知书',
          label: '转让通知书'
        },
      ],
      // 表单数据
      form: {
        filename: "",
        filepath: "",
        id: null,
        intellectualPropertyId: null,
        type: ""
      },
      // 全部文件
      files: [],
      // 显示弹窗
      dialogVisible: false,
    }
  },
  created() {
    this.form.intellectualPropertyId = this.queryParams.id = +this.$route.query.id ?? null
    this.getList()
    this.getFileList()
  },
  computed: {
    ...mapGetters([
      'device'
    ]),
  },
  methods: {
    // 打开弹窗
    openDialog(row) {
      this.form = {
        ...row
      }
      this.dialogVisible = true
    },
    // 获取文件
    async getFileList() {
      const res = await getFileListApi({
        intellectualPropertyId: this.queryParams.id
      })
      if (res.code === 200) {
        this.files = res.data
      }
    },
    handleChange(row) {
      this.pdfUrl = location.origin + this.pdfjs + '?file=' + this.env + row.filepath
    },
    // 删除文件
    handleDelete(row) {
      deleteDataApi({
        id: row.id
      })
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getFileList()
            this.pdfUrl = ""
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
        })
    },
    // 文件上传成功
    uploadSuccess(res, file) {
      this.fileList = []

      addDataApi({
        filepath: res.fileName,
        filename: file.name,
        type: this.uploadFileType,
        id: null,
        intellectualPropertyId: +this.$route.query.id ?? null
      })
        .then((res) => {
          if (res.code === 200) {
            this.$message.success('上传成功')
            this.getFileList()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
        })
    },
    // 获取数据
    async getList() {
      this.loading = true
      const res = await getDataListApi(this.queryParams)
      if (res.code === 200) {
        this.tableData = res.rows
      }
      this.loading = false
    },
    // 修改文件类型
    submitForm(formRef) {
      updateDataApi(this.form)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.getFileList()
            this.dialogVisible = false
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
        })
    },
  },
}
</script>

<style scoped lang="scss">

.file_list {
  max-height: 800px;
  overflow: auto;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px;
    border: 1px solid #999;
    margin: 0 0 4px;
    cursor: pointer;

    .text {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
